<%@ page contentType="text/html;charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="/WEB-INF/tld/mytaglibs.tld" prefix="my" %>
<c:set var="ctxStatic" value="${pageContext.request.contextPath}/aceAjax"/>
<link rel="stylesheet" href="${ctxStatic}/css/plugins/jqgrid/ui.jqgrid.css" />
<title>单一实体</title>
<div class="page-header">
	<h1>单一实体<small><i class="ace-icon fa fa-angle-double-right"></i>[管理]</small></h1>
</div>
<div class="row margin_b_5">
	<div class="col-sm-12">
		<div class="pull-left">
			<button class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="left" onclick="add()" title="添加">
				<i class="fa fa-plus"></i>&nbsp;添加
			</button>

			<button class="btn btn-default btn-sm" data-toggle="tooltip" data-placement="left" onclick="edit()" title="修改">
				<i class="fa fa-file-text-o"></i>&nbsp;修改
			</button>
			<button class="btn btn-default btn-sm" onclick="deleteAll()" data-toggle="tooltip" data-placement="top">
				<i class="fa fa-trash-o"></i>&nbsp;删除
			</button>
			<button class="btn btn-default btn-sm " data-toggle="tooltip" data-placement="left" onclick="sortOrRefresh()" title="刷新">
				<i class="glyphicon glyphicon-repeat"></i>&nbsp;刷新
			</button>
		</div>
		<div class="pull-right">
			<button class="btn btn-primary  btn-sm " onclick="search()">
				<i class="fa fa-search"></i>&nbsp;查询
			</button>
			<button class="btn btn-primary  btn-sm " onclick="reset()">
				<i class="fa fa-refresh"></i>&nbsp;重置
			</button>
		</div>
	</div>
</div>
<div class="row">
	<div class="col-sm-12">
		<table id="grid-table"></table>
		<div id="grid-pager"></div>
	</div>
</div>

<script type="text/javascript">

function add() {
	window.location.href ="#page/entityOne/add.do";
}

function edit() {
	window.location.href ="#page/entityOne/update.do?key=410101111870475805";
}

var scripts = [null,
               "${ctxStatic}/js/plugins/jqgrid/jquery.jqGrid.min.js",
               "${ctxStatic}/js/plugins/jqgrid/i18n/grid.locale-cn.js", null];
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
		var grid_data = 
		[ 
			{id:"1",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
			{id:"2",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
			{id:"3",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
			{id:"4",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},
			{id:"5",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},
			{id:"6",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
			{id:"7",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX",sdate:"2007-12-03"},
			{id:"8",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
			{id:"9",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
			{id:"10",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
			{id:"11",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
			{id:"12",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
			{id:"13",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"},
			{id:"14",name:"Laser Printer",note:"note2",stock:"Yes",ship:"FedEx",sdate:"2007-12-03"},
			{id:"15",name:"Play Station",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
			{id:"16",name:"Mobile Telephone",note:"note",stock:"Yes",ship:"ARAMEX",sdate:"2007-12-03"},
			{id:"17",name:"Server",note:"note2",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
			{id:"18",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
			{id:"19",name:"Matrix Printer",note:"note3",stock:"No", ship:"FedEx",sdate:"2007-12-03"},
			{id:"20",name:"Desktop Computer",note:"note",stock:"Yes",ship:"FedEx", sdate:"2007-12-03"},
			{id:"21",name:"Laptop",note:"Long text ",stock:"Yes",ship:"InTime",sdate:"2007-12-03"},
			{id:"22",name:"LCD Monitor",note:"note3",stock:"Yes",ship:"TNT",sdate:"2007-12-03"},
			{id:"23",name:"Speakers",note:"note",stock:"No",ship:"ARAMEX",sdate:"2007-12-03"}
		];
		
		var subgrid_data = 
		[
		 {id:"1", name:"sub grid item 1", qty: 11},
		 {id:"2", name:"sub grid item 2", qty: 3},
		 {id:"3", name:"sub grid item 3", qty: 12},
		 {id:"4", name:"sub grid item 4", qty: 5},
		 {id:"5", name:"sub grid item 5", qty: 2},
		 {id:"6", name:"sub grid item 6", qty: 9},
		 {id:"7", name:"sub grid item 7", qty: 3},
		 {id:"8", name:"sub grid item 8", qty: 8}
		];
		
		
		jQuery(function($) {
			$.jgrid.defaults.styleUI = 'Bootstrap';
			
			var grid_selector = "#grid-table";
			var pager_selector = "#grid-pager";

			var parent_column = $(grid_selector).closest('[class*="col-"]');
			// resize to fit page size
			$(window).on('resize.jqGrid', function() {
				$(grid_selector).jqGrid('setGridWidth', parent_column.width());
			})

			// resize on sidebar collapse/expand
			$(document).on('settings.ace.jqGrid', function(ev, event_name, collapsed) {
				if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
					// setTimeout is for webkit only to give time for DOM changes
					// and then redraw!!!
					setTimeout(function() {
						$(grid_selector).jqGrid('setGridWidth', parent_column.width());
					}, 20);
				}
			})
			jQuery(grid_selector).jqGrid({
				data : grid_data,
				datatype : "local",
				height : 10*28+30,
				colNames:[' ', 'ID','Last Sales','Name', 'Stock', 'Ship via','Notes'],
				colModel:[
					{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
						formatter:'actions', 
						formatoptions:{
							keys:true,
							//delbutton: false,//disable delete button
							
							delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
							//editformbutton:true, editOptions:{recreateForm: true, beforeShowForm:beforeEditCallback}
						}
					},
					{name:'id',index:'id', width:60, sorttype:"int", editable: true},
					{name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date",unformat: pickDate},
					{name:'name',index:'name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
					{name:'stock',index:'stock', width:70, editable: true,edittype:"checkbox",editoptions: {value:"Yes:No"},unformat: aceSwitch},
					{name:'ship',index:'ship', width:90, editable: true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}},
					{name:'note',index:'note', width:150, sortable:false,editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}} 
				], 

				viewrecords : true,
				rowNum : 10,
				rowList : [ 10, 20, 30 ],
				pager : pager_selector,
				altRows : true,
				// toppager: true,

				multiselect : true,
				// multikey: "ctrlKey",
				multiboxonly : true,

				loadComplete : function() {
					var table = this;
					setTimeout(function() {
						styleCheckbox(table);

						updateActionIcons(table);
						updatePagerIcons(table);
						enableTooltips(table);
					}, 0);
				},
				// nothing is saved
				editurl : "${ctxStatic}/dummy.php"
				//,caption : "jqGrid with inline editing"
			    // ,autowidth: true,


			});
			
			//trigger window resize to make the grid get the correct size
			$(window).triggerHandler('resize.jqGrid');


			// switch element when editing inline
			function aceSwitch(cellvalue, options, cell) {
				setTimeout(function() {
					$(cell).find('input[type=checkbox]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
				}, 0);
			}
			// enable datepicker
			function pickDate(cellvalue, options, cell) {
				setTimeout(function() {
					$(cell).find('input[type=text]').datepicker({
						format : 'yyyy-mm-dd',
						autoclose : true
					});
				}, 0);
			}



			function style_edit_form(form) {
				// enable datepicker on "sdate" field and switches for "stock" field
				form.find('input[name=sdate]').datepicker({
					format : 'yyyy-mm-dd',
					autoclose : true
				})

				form.find('input[name=stock]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
				// don't wrap inside a label element, the checkbox value won't be
				// submitted (POST'ed)
				// .addClass('ace ace-switch ace-switch-5').wrap('<label
				// class="inline" />').after('<span class="lbl"></span>');

				// update buttons classes
				var buttons = form.next().find('.EditButton .fm-button');
				buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();// ui-icon,
																				// s-icon
				buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
				buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')

				buttons = form.next().find('.navButton a');
				buttons.find('.ui-icon').hide();
				buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
				buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
			}

			function style_delete_form(form) {
				var buttons = form.next().find('.EditButton .fm-button');
				buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();// ui-icon,
																									// s-icon
				buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
				buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
			}

			function style_search_filters(form) {
				form.find('.delete-rule').val('X');
				form.find('.add-rule').addClass('btn btn-xs btn-primary');
				form.find('.add-group').addClass('btn btn-xs btn-success');
				form.find('.delete-group').addClass('btn btn-xs btn-danger');
			}
			function style_search_form(form) {
				var dialog = form.closest('.ui-jqdialog');
				var buttons = dialog.find('.EditTable')
				buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
				buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
				buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
			}

			function beforeDeleteCallback(e) {
				var form = $(e[0]);
				if (form.data('styled'))
					return false;

				form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
				style_delete_form(form);

				form.data('styled', true);
			}

			function beforeEditCallback(e) {
				var form = $(e[0]);
				form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
				style_edit_form(form);
			}

			// it causes some flicker when reloading or navigating grid
			// it may be possible to have some custom formatter to do this as the
			// grid is being created to prevent this
			// or go back to default browser checkbox styles for the grid
			function styleCheckbox(table) {
				/**
				 * $(table).find('input:checkbox').addClass('ace') .wrap('<label
				 * />') .after('<span class="lbl align-top" />')
				 * 
				 * 
				 * $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
				 * .find('input.cbox[type=checkbox]').addClass('ace') .wrap('<label
				 * />').after('<span class="lbl align-top" />');
				 */
			}

			// unlike navButtons icons, action icons in rows seem to be hard-coded
			// you can change them like this in here if you want
			function updateActionIcons(table) {
				/**
				 * var replacement = { 'ui-ace-icon fa fa-pencil' : 'ace-icon fa
				 * fa-pencil blue', 'ui-ace-icon fa fa-trash-o' : 'ace-icon fa
				 * fa-trash-o red', 'ui-icon-disk' : 'ace-icon fa fa-check green',
				 * 'ui-icon-cancel' : 'ace-icon fa fa-times red' };
				 * $(table).find('.ui-pg-div span.ui-icon').each(function(){ var
				 * icon = $(this); var $class =
				 * $.trim(icon.attr('class').replace('ui-icon', '')); if($class in
				 * replacement) icon.attr('class', 'ui-icon '+replacement[$class]); })
				 */
			}

			// replace icons with FontAwesome icons like above
			function updatePagerIcons(table) {
				var replacement = {
					'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
					'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
					'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
					'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
				};
				$('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function() {
					var icon = $(this);
					var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

					if ($class in replacement)
						icon.attr('class', 'ui-icon ' + replacement[$class]);
				})
			}

			function enableTooltips(table) {
				$('.navtable .ui-pg-button').tooltip({
					container : 'body'
				});
				$(table).find('.ui-pg-div').tooltip({
					container : 'body'
				});
			}

			// var selr = jQuery(grid_selector).jqGrid('getGridParam','selrow');

			$(document).one('ajaxloadstart.page', function(e) {
				$.jgrid.gridDestroy(grid_selector);
				$('.ui-jqdialog').remove();
			});
		});
});

</script>

